<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<title>表格隐藏列插件演示</title>
	<link rel="stylesheet" href="packaged/css/semantic.css" type="text/css" />
	<link rel="stylesheet" href="css/default.css" type="text/css" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<style type="text/css">
	.ui.hidebar {
		position: fixed;
		left: 2px;
		top:2px;
		margin: 0px;
		text-align: left;
		min-width: 150px;
		max-width: 200px;
		border: 1px solid #ccc;
		border-radius: 0.3125em;
		background-color: #ccc;
		-webkit-transition: background-color 0.3s ease-out, -webkit-box-shadow 0.2s ease, border-color 0.2s ease;
		transition: background-color 0.3s ease-out, box-shadow 0.2s ease, border-color 0.2s ease;
		-webkit-box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		box-shadow: 0em 0em 0em 0em rgba(0, 0, 0, 0.3) inset;
		-webkit-appearance: none;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	.ui.hidebar .item {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		vertical-align: middle;
		text-decoration: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: opacity 0.2s ease, background 0.2s ease, -webkit-box-shadow 0.2s ease;
		transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	}
	.ui.hidebar .item.header {
		background-color: transparent !important;
		border-right-width: 0px !important;
		font-weight: bold !important;
		color: rgba(0, 0, 0, 0.8) !important;
		margin: 5px;
	}

	.ui.hidebar .item.header > i.icon {
		float: right;
		width: 1.22em;
		margin: 0em 0em 0em 0.5em;
	}
	.ui.hidebar .item.wrap {
		margin: 0px;
		background-color: #fff;
		overflow-x:auto;
		max-height: 400px;
	}

	.ui.hidebar .item.wrap .item {
		width: 100%;
		padding: 0.53em 0.55em;
		border-top: 0em solid rgba(0, 0, 0, 0);
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		-moz-user-select: -moz-none;
		-khtml-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
		border-bottom: 1px dashed #ccc;
	}
	</style>
	<script src="js/jquery.min.js"></script>
	<script src="packaged/javascript/semantic.js"></script>
	<script src="javascript/hyui.src.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		var t1 = hy.tablehide("#exp1");
		$(".ui.mini.teal").on("click", function(){
			t1.toggle("down");
		});

		var t2 = hy.tablehide("#exp2",{
			filter: function(i, o) {
				return false;
			}
		});
		$(".ui.mini.green").on("click", function(){
			t2.toggle("down");
		});

		hy.tablesort("#exp2","attr");
	});
	</script>
</head>
<body>
	<div class="main-wrapper">
		<h3>HY-UI Demos</h3>

		<div class="theme">表格隐藏列插件演示用例。</div>
		<strong>2.</strong>
		简单示例 <em>hy.tablehide(table);</em>
		<pre><code class="javascript">hy.tablehide(".ui.table");</code></pre>
		<div class="ui mini teal button">点击</div>
		<table id="exp1" class="ui sortable table segment">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>A01</td>
					<td>张三</td>
					<td>22</td>
					<td>2012-12-12</td>
				</tr>
				<tr>
					<td>A02</td>
					<td>李四</td>
					<td>32</td>
					<td>2013-04-16</td>
				</tr>
				<tr>
					<td>A03</td>
					<td>王五</td>
					<td>31</td>
					<td>2012-05-11</td>
				</tr>
				<tr>
					<td>B01</td>
					<td>赵二</td>
					<td>233</td>
					<td>2012-01-11</td>
				</tr>
			</tbody>
		</table>

		<strong>2.</strong>
		默认配置
		<pre><code class="javascript">{
	title: "显示/隐藏列", // 标题
	attr: "attr",  // 多级表头是必须指定的属性
	identity: "hid", // 多级表头指定标识
	uper: "uhid", // 多级表头指定上级标识
	filter: function(i, th) { // 遍历生成的列表，传入索引与对应的表头对象
		return false; // 返回true表示隐藏,false表示不隐藏
	}
}
</code></pre>
		<strong>3.</strong> 使用说明
		<pre><code class="javascript">hy.tablehide(".ui.table","标题"); // 指定标题
hy.tablehide(".ui.table",function(i,th){return false;}); // 指定过滤器
</code></pre>
		<strong>4.</strong> 综合演示
		<pre><code class="javascript">&lt;thead&gt;
    &lt;tr&gt;
        &lt;th rowspan="3" attr="id"&gt;
            编号
        &lt;/th&gt;
        &lt;th hid="1" colspan="3"&gt;
            人员信息
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th uhid="1" rowspan="2" attr="name"&gt;
            姓名
        &lt;/th&gt;
        &lt;th uhid="1" hid="2" colspan="2"&gt;
            日期信息
        &lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;th uhid="2" attr="into-date"&gt;
            入职日期
        &lt;/th&gt;
        &lt;th uhid="2" attr="out-date"&gt;
            离职日期
        &lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;</code></pre>
		<p>特别说明 <em>var b = hy.tablehide(table);</em>的返回对象有<em>toggle()</em>方法控制隐藏列表的显示状态</p>
		<pre><code class="javascript">var b = hy.tablehide(".ui.table", {
	identity: "hid",
	uper: "uhid"
});
$(".ui.button").bind("click",
function() {
	b.toggle(); // 调用jQuery对象的toggle事件，方法一致
});
</code></pre>
		<div class="ui mini green button">点击</div>
		<table id="exp2" class="ui inverted purple celled sortable table segment">
			<thead>
				<tr>
					<th rowspan="3" attr="id">编号</th>
					<th hid="1" colspan="3">人员信息</th>
				</tr>
				<tr>
					<th uhid="1" rowspan="2" attr="name">姓名</th>
					<th uhid="1" hid="2" colspan="2">日期信息</th>
				</tr>
				<tr>
					<th uhid="2" attr="into-date">入职日期</th>
					<th uhid="2" attr="out-date">离职日期</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>101</td>
					<td>Jim</td>
					<td>2012-12-12</td>
					<td>2012-04-17</td>
				</tr>
				<tr>
					<td>201</td>
					<td>Tom</td>
					<td>2012-04-17</td>
					<td>2013-11-22</td>
				</tr>
				<tr>
					<td>301</td>
					<td>Michell</td>
					<td>2013-11-22</td>
					<td>2014-11-22</td>
				</tr>
			</tbody>
		</table>
		<p>&nbsp;</p>
		<div class="theme">&copy;2014 宏宇软件 by sylthasgg@gmail.com</div>
	</div>

	<script type="text/javascript" src="js/highlight.js"></script>
	<script type="text/javascript">hljs.initHighlightingOnLoad();</script>
</body>
</html>